<template>
    <div>
      <el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%"
        border
      >
        <el-table-column
          label="编号"
          width="180"
          sortable
          prop="id"
        >
        </el-table-column>
        <el-table-column
          label="姓名"
          width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>住址: {{ scope.row.address }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="生日" prop="birthday"></el-table-column>
        <el-table-column label="性别" prop="sex"></el-table-column>
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入姓名关键字搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

            <el-popconfirm
              title="您确定删除吗？"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button slot="reference"
                         size="mini"
                         type="danger">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>


      <!-- 分页插件 -->
      <el-row>
        <el-col :span="12" :offset="12">
          <el-pagination
            style="margin: 10px 0px"
            layout="prev, pager, next, jumper, total, sizes "
            :page-size="size"
            :current-page="pageNow"
            :page-sizes="[5,10,15]"
            :total="total"
            prev-text="上一页"
            next-text="下一页"
            @current-change="findPage"
            @size-change="findSize"
          background>
          </el-pagination>
        </el-col>
      </el-row>


      <el-button style="margin: 10px 0px" type="primary" size="mini" plain @click="show=!show">添加</el-button>

      <transition name="el-zoom-in-center">
        <div v-show="show" class="transition-box">
          <el-form ref="userform" :model="form" label-width="100px" label-suffix=":" :hide-required-asterisk="false" :rules="rules">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
                <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
              <el-input type="textarea" v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('userform')">立即创建</el-button>
              <el-button @click="resetForm">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </transition>


      <div style="width: 100%;height: 800px"></div>
      <el-backtop></el-backtop>

    </div>
</template>

<script>
    export default {
        name: "List",
      data() {
        return {
          tableData: [],
          search: '',
          show: true,
          form: {
            name: '',
            birthday: '',
            sex: '男',
            address: ''
          },
          rules: {
            name: [
              { required: true, message: '请输入姓名', trigger: 'blur' },
              { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
            ],
            birthday: [
              { required: true, message: '请选择用户生日', trigger: 'blur' },
            ],
            address: [
              { required: true, message: '请输入地址', trigger: 'blur' },
              { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
            ]
          },
          total: 0,
          pageNow: 1,
          size: 5

        }
      },
      methods: {
          // 用来处理分页相关
          findPage(page) {
            console.log(page);
            this.findAllTableDate(page,this.size)
          },
        findSize(size){
          console.log(size)
          this.findAllTableDate(this.pageNow,size)
        },
        handleEdit(index, row) {
          console.log(index, row);
          // 展示编辑表单
          this.show = true;
          this.form = row
        },
        handleDelete(index, row) {
          this.$http.delete("http://localhost:8081/user/delete/"+row.id).then(resp => {
            if (resp.data.status) {
              this.$message({
                message: '恭喜您,' + resp.data.msg,
                type: 'success'
              });
              this.findAllTableDate();
            }else {
              this.$message.error(resp.data.msg)
            }
          })
          console.log(index, row);
        },
        onSubmit(userForm) {
          this.$refs[userForm].validate((valid) => {
            if (valid) {
              this.$http.post("http://localhost:8081/user/save",this.form).then(resp => {
                console.log(resp.data);
                if (resp.data.status) {
                  this.$message({
                    message: '恭喜你,' + resp.data.msg,
                    type: 'success'
                  });
                  // 清空表单信息
                  this.form = {
                    sex: '男'
                  }
                  // 隐藏表单
                  this.show = false
                  // 刷新数据
                  this.findAllTableDate();
                }else {
                  this.$message({
                    message: resp.data.msg,
                    type: 'error'
                  });
                }
              })
            } else {
              this.$message({
                message: "表单信息不合法",
                type: 'error'
              });
              console.log("error sumbit!!")
              return false;
            }
          })
        },
        findAllTableDate(page,size) {
            page = page ? page : this.pageNow;
            size = size ? size : this.size;
          this.$http.get("http://localhost:8081/user/findByPage?pageNow="+page+"&pageSize="+size).then(resp => {
            this.tableData = resp.data.users;
            this.total = resp.data.total;
          })
        },
        resetForm() {
          this.form = {
            sex: '男'
          }
        }
      },
      created() {
          this.findAllTableDate();
      }
    }
</script>

<style scoped>
  .transition-box {
    margin-bottom: 10px;
    width: 100%;
    height: 400px;
    border-radius: 4px;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>
